<template>
	<view class="content">
		<image src="/static/loginbg.jpg" class="loginbg" mode="aspectFill"></image>
		<view class="content-mask">
			<view class="app-title">{{title}}</view>
			<view class="app-title-sub">{{subtitle}}</view>
			<view class="login-form">
				<view class="form-row">
					<view class="form-label">登录名：</view>
					<input class="form-input" type="text" v-model="username" />
				</view>
				<view class="form-row">
					<view class="form-label">登录密码：</view>
					<input class="form-input" type="password" v-model="password" />
				</view>
			</view>
			<view class="login-button" @click="doLogin()">立即登录</view>
		</view>
	</view>
</template>
<style>
	.content{
		width:100vw;
		height:100vh;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		color:#fff;
		display: flex;
		flex-direction: column;
	}
	.loginbg{
		width: 100vw;
		height: 100vh;
		position:absolute;
		left:0;
		top:0;
		z-index: 5;
	}
	.content-mask{
		width: 100vw;
		height: 100vh;
		position:absolute;
		left:0;
		top:0;
		z-index: 10;
		color: #fff;
		display: flex;
		flex-direction: column;
		background-color: rgba(0,0,0,0.4);
	}
	.app-title{
		font-size:300%;
		text-align: center;
		margin-top:200rpx;
	}
	.app-title-sub{
		text-align: center;
		margin-top:20rpx;
		letter-spacing: 25rpx;
	}
	.login-form{
		width:80%;
		margin:0 5%;
		padding: 10rpx 5%;
		margin-top:260rpx;
	}
	.form-row{
		margin-top:30rpx;
	}
	.form-label{
		color:#ddd;
		font-size:90%;
	}
	.form-input{
		border-bottom:1px solid #ddd;
		padding:10rpx;
		letter-spacing: 10rpx;
		font-size:110%;
		font-weight: bold;
	}
	.login-button{
		width:70%;
		height:60rpx;
		line-height: 60rpx;
		padding:15rpx;
		background-color:#12D26A;
		text-align: center;
		margin:0 auto;
		margin-top:80rpx;
		border-radius: 45rpx;
	}
	.regist-button{
		text-align: center;
		margin-top:30rpx;
	}
	
</style>
<script>
	export default {
		//1、数据定义:
		//页面上需要展示的数据
		//页面上需要绑定的数据
		//控制页面样式的数据
		data() {
			return {
				title:"Roommates",
				subtitle:"寝室人脸扫描程序",
				username:"",
				password:""
			}
		},
		//2、逻辑处理
		methods: {
			//登录方法
			doLogin(){
				if(this.username.length==0 || this.password.length==0){
					//弹出提示
					uni.showToast({
						title:"请输入用户名密码",
						icon:"none"
					});
					return;
				}
				uni.showLoading({
					title:"登录中"
				})
				//发送登录请求
				uni.request({
					url:this.$serverUrl+"/api/login?login="+this.username+"&password="+this.password,
					method:"POST",
					success:(result)=>{
						console.log("登录请求发送，收到响应：",result);
						uni.hideLoading();
						if(result.statusCode!=200){
							uni.showToast({
								title:"用户名密码错误",
								icon:"none"
							});
							return;
						}else{
							uni.showToast({
								title:"登录成功"
							});
							uni.setStorageSync("token",result.data);
							setTimeout(()=>{
								uni.navigateTo({
									url:'../index/index'
								})
							},1500);
							
						}
						
					}
				});
			}
		},
		//3、生命周期
		onLoad(){

		}
	}
</script>


